<template>
  <div id="basic">
    <div style=" width: 100%; background-color:#FF5C82;  text-align: center; margin:auto">
      <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
      <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
      <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">孕妇营养疾病膳食营养干预方案报告单</div>
    </div>

    <div
      style="
        width: 100%;
        height: 40px;
        background-color: #ff5c82;
        margin-top: 10px;
        display: flex;
      "
    >
      <div>
        <img src="../../assets/img/12.jpg" style="height: 40px" alt="" />
      </div>
      <div
        style="
          font-size: 20px;
          margin-left: 10px;
          line-height: 40px;
          color: #fff;
        "
      >
        孕妇基本信息
      </div>
    </div>
    <div style="width: 1070px; border-top: 2px solid #FF5C82; border-right: 2px solid #FF5C82;  margin-top: 10px">
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                检测日期</div>
              <div
                style="width: 90%; height: 40px; border-bottom: 2px solid #FF5C82; line-height: 40px; text-indent: 20px;">
                {{ report_time }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                孕妇姓名
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.username ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                手机号
              </div>
              <div
                style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                {{ contents.guardian_mobile  ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
                年龄
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                {{ contents.age ?? '[]' }}岁
              </div>
              <div
                style=" background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                身高
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.height ?? '[]' }}CM
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                体重
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.weight ?? '[]' }}KG
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                孕周数
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.gestational_weeks ?? '[]' }}周
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                末次月经
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.pre_weight ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                预产期
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
                {{ contents.edc ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                多胎
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
                {{ contents.twin ?? '[]' }}
              </div>
              <div
                style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
                腹围
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px;  border-bottom: 2px solid #FF5C82; ">
                {{ contents.abdominal_girth ?? '[]' }}
              </div>
              <div
                style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">
              
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-bottom: 2px solid #FF5C82; ">
               
              </div>
              <div
                style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">
              
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
               
              </div>
            </div>
           
          </div>

    <div
      style="
        width: 100%;
        height: 40px;
        background-color: #ff5c82;
        margin-top: 20px;
        display: flex;
      "
    >
      <div>
        <img src="../../assets/img/21.jpg" style="height: 40px" alt="" />
      </div>
      <div
        style="
          font-size: 20px;
          margin-left: 10px;
          line-height: 40px;
          color: #fff;
        "
      >
        儿童饮食及生活方式原则
      </div>
    </div>
    <div
      style="
        width: 97%;
        min-height: 150px;
        border: 2px solid #ff5c82;
        margin-top: 20px;
        margin-left: 10px;
        padding-left: 10px;
      "
      v-html="principle"
    ></div>
    <!-- 膳食方案明细 -->

    <div
      style="
        width: 100%;
        height: 40px;
        background-color: #ff5c82;
        margin-top: 20px;
        display: flex;
      "
    >
      <div>
        <img src="../../assets/img/22.jpg" style="height: 40px" alt="" />
      </div>
      <div
        style="
          font-size: 20px;
          margin-left: 10px;
          line-height: 40px;
          color: #fff;
        "
      >
        膳食方案明细
      </div>
    </div>
    <div
      style="
        width: 98%;
        border: 2px solid #ff5c82;
        line-height: 40px;
        text-align: center;
        margin-top: 20px;
        margin-left: 10px;
      "
    >
      <div style="display: flex">
        <div class="biao1" style="height: 40px; width: 50%; color: #ffffff">
          名称
        </div>
        <div class="biao3" style="height: 40px; width: 50%; color: #ffffff">
          推荐值
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">能量</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ letEnergy.start }}～{{ letEnergy.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">碳水化合物</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ carbohydrate.start }}～{{ carbohydrate.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">蛋白质</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ protein.start }}～{{ protein.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">脂肪</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ fat.start }}～{{ fat.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">碳水化合物</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ carbohydrate.start }}～{{ carbohydrate.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">钙</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ calcium.start }}～{{ calcium.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">钠</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ sodium.start }}～{{ sodium.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">镁</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ magnesium.start }}～{{ magnesium.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">铁</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ iron.start }}～{{ iron.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">锌</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ zinc.start }}～{{ zinc.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">硒</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ selenium.start }}～{{ selenium.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">维生素A</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ vitamin_a.start }}～{{ vitamin_a.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 50px; width: 50%; line-height: 50px">
          维生素E
        </div>
        <div class="biao4" style="height: 50px; width: 50%; line-height: 50px">
          {{ vitamin_e.start }}～{{ vitamin_e.end }}
        </div>
      </div>

      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">维生素B1</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ vitamin_b1.start }}～{{ vitamin_b1.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">维生素B2</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ vitamin_b2.start }}～{{ vitamin_b2.end }}
        </div>
      </div>
      <div style="display: flex">
        <div class="biao2" style="height: 40px; width: 50%">维生素C</div>
        <div class="biao4" style="height: 40px; width: 50%">
          {{ vitamin_c.start }}～{{ vitamin_c.end }}
        </div>
      </div>
    </div>

    <div style=" width: 99%;height: 40px;background-color: #FF5C82;margin-top: 20px;display: flex;page-break-before:always;">
          <div><img src="../../assets/img/23.jpg" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            一周膳食清单
          </div>
        </div>
        <div style="border:1px solid #FF5C82;width:99%;padding-bottom:20px">
          <div class="dietOn" v-for="item in diet_analysis" :key="item">
            <div class="time-botton">
              <img src="../../assets/img/evaluaction_service_icon.png" alt="" style="width:15px; height:15px;">
              {{ item.pName }}
            </div>

            <div style="display:flex">
              <div class="plates" style="margin-left:10px;">
                <div class="time-type time-left-color">早餐</div>
                <div class="der">
                  <div style="margin-left:6%;padding-top: 6%;">
                    <span class="plates-top-img" v-for="breakfast in item.早餐" :key="breakfast"><img
                        :src="'http://' + baseUrl + '/' + breakfast.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="earlier in item.早点" :key="earlier">
                      <img v-if="earlier.food_name"
                        :src="'http://' + baseUrl + '/' + earlier.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                  </div>
                </div>
                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>早餐7:00: <span v-for="breakfast in item.早餐" :key="breakfast">
                      <o class="foodsNames">{{ breakfast.food_name }}</o> 重量:{{ breakfast.weight }}g;
                    </span></div>
                  <div>早点10:00: <span v-for="earlier in item.早点" :key="earlier">
                      <o class="foodsNames">{{ earlier.food_name }}</o> 重量:{{ earlier.weight }}g;
                    </span></div>
                </div>
              </div>

              <div class="plates">
                <div class="time-type time-common-color">午餐</div>
                <div class="der">
                  <div style="">
                    <span class="plates-top-img" v-for="lunch in item.午餐" :key="lunch"><img
                        :src="'http://' + baseUrl + '/' + lunch.meal_image" alt="" style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="noon in item.午点" :key="noon">
                      <img v-if="noon.food_name"
                        :src="'http://' + baseUrl + '/' + noon.meal_image" alt="" style="width: 100%;height: 100%"></span>
                  </div>
                </div>

                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>午餐12:00: <span v-for="lunch in item.午餐" :key="lunch">
                      <o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{ lunch.weight }}g;
                    </span></div>
                  <div>午点15:00: <span v-for="noon in item.午点" :key="noon">
                      <o class="foodsNames">{{ noon.food_name }}</o> 重量:{{ noon.weight }}g;
                    </span></div>
                </div>
              </div>

              <div class="plates">
                <div class="time-type time-right-color">晚餐</div>
                <div class="der">
                  <div style="margin-left:6%;padding-top: 6%;">
                    <span class="plates-top-img" v-for="dinner in item.晚餐" :key="dinner"><img
                        :src="'http://' + baseUrl + '/' + dinner.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="late in item.晚点" :key="late">
                      <img v-if="late.food_mame"
                        :src="'http://' + baseUrl + '/' + late.meal_image" alt="" style="width: 100%;height: 100%"></span>
                  </div>
                </div>

                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>晚餐18:00: <span v-for="dinner in item.晚餐" :key="dinner">
                      <o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{ dinner.weight }}g;
                    </span></div>
                  <div>晚点21:00: <span v-for="late in item.晚点" :key="late">
                      <o class="foodsNames">{{ late.food_name }}</o> 重量:{{ late.weight }}g;
                    </span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="border:2px solid #FF5C82;width:99%;padding-bottom:20px;page-break-before:always;">
          <div class="dietOn" v-for="item in diet_analysis1" :key="item">
            <div class="time-botton">
              <img src="../../assets/img/evaluaction_service_icon.png" alt="" style="width:15px; height:15px;">
              {{ item.pName }}
            </div>

            <div style="display:flex">
              <div class="plates" style="margin-left:10px;">
                <div class="time-type time-left-color">早餐</div>
                <div class="der">
                  <div style="margin-left:6%;padding-top: 6%;">
                    <span class="plates-top-img" v-for="breakfast in item.早餐" :key="breakfast"><img
                        :src="'http://' + baseUrl + '/' + breakfast.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="earlier in item.早点" :key="earlier"><img
                        :src="'http://' + baseUrl + '/' + earlier.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                  </div>
                </div>
                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>早餐7:00: <span v-for="breakfast in item.早餐" :key="breakfast">
                      <o class="foodsNames">{{ breakfast.food_name }}</o> 重量:{{ breakfast.weight }}g;
                    </span></div>
                  <div>早点10:00: <span v-for="earlier in item.早点" :key="earlier">
                      <o class="foodsNames">{{ earlier.food_name }}</o> 重量:{{ earlier.weight }}g;
                    </span></div>
                </div>
              </div>

              <div class="plates">
                <div class="time-type time-common-color">午餐</div>
                <div class="der">
                  <div style="">
                    <span class="plates-top-img" v-for="lunch in item.午餐" :key="lunch"><img
                        :src="'http://' + baseUrl + '/' + lunch.meal_image" alt="" style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="noon in item.午点" :key="noon"><img
                        :src="'http://' + baseUrl + '/' + noon.meal_image" alt="" style="width: 100%;height: 100%"></span>
                  </div>
                </div>

                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>午餐12:00: <span v-for="lunch in item.午餐" :key="lunch">
                      <o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{ lunch.weight }}g;
                    </span></div>
                  <div>午点15:00: <span v-for="noon in item.午点" :key="noon">
                      <o class="foodsNames">{{ noon.food_name }}</o> 重量:{{ noon.weight }}g;
                    </span></div>
                </div>
              </div>

              <div class="plates">
                <div class="time-type time-right-color">晚餐</div>
                <div class="der">
                  <div style="margin-left:6%;padding-top: 6%;">
                    <span class="plates-top-img" v-for="dinner in item.晚餐" :key="dinner"><img
                        :src="'http://' + baseUrl + '/' + dinner.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="late in item.晚点" :key="late"><img
                        :src="'http://' + baseUrl + '/' + late.meal_image" alt="" style="width: 100%;height: 100%"></span>
                  </div>
                </div>

                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>晚餐18:00: <span v-for="dinner in item.晚餐" :key="dinner">
                      <o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{ dinner.weight }}g;
                    </span></div>
                  <div>晚点21:00: <span v-for="late in item.晚点" :key="late">
                      <o class="foodsNames">{{ late.food_name }}</o> 重量:{{ late.weight }}g;
                    </span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="border:2px solid #FF5C82;width:99%;padding-bottom:20px;page-break-before:always;">
          <div class="dietOn" v-for="item in diet_analysis2" :key="item">
            <div class="time-botton">
              <img src="../../assets/img/evaluaction_service_icon.png" alt="" style="width:15px; height:15px;">
              {{ item.pName }}
            </div>

            <div style="display:flex">
              <div class="plates" style="margin-left:10px;">
                <div class="time-type time-left-color">早餐</div>
                <div class="der">
                  <div style="margin-left:6%;padding-top: 6%;">
                    <span class="plates-top-img" v-for="breakfast in item.早餐" :key="breakfast"><img
                        :src="'http://' + baseUrl + '/' + breakfast.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="earlier in item.早点" :key="earlier"><img
                        :src="'http://' + baseUrl + '/' + earlier.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                  </div>
                </div>
                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>早餐7:00: <span v-for="breakfast in item.早餐" :key="breakfast">
                      <o class="foodsNames">{{ breakfast.food_name }}</o> 重量:{{ breakfast.weight }}g;
                    </span></div>
                  <div>早点10:00: <span v-for="earlier in item.早点" :key="earlier">
                      <o class="foodsNames">{{ earlier.food_name }}</o> 重量:{{ earlier.weight }}g;
                    </span></div>
                </div>
              </div>

              <div class="plates">
                <div class="time-type time-common-color">午餐</div>
                <div class="der">
                  <div style="">
                    <span class="plates-top-img" v-for="lunch in item.午餐" :key="lunch"><img
                        :src="'http://' + baseUrl + '/' + lunch.meal_image" alt="" style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="noon in item.午点" :key="noon"><img
                        :src="'http://' + baseUrl + '/' + noon.meal_image" alt="" style="width: 100%;height: 100%"></span>
                  </div>
                </div>

                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>午餐12:00: <span v-for="lunch in item.午餐" :key="lunch">
                      <o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{ lunch.weight }}g;
                    </span></div>
                  <div>午点15:00: <span v-for="noon in item.午点" :key="noon">
                      <o class="foodsNames">{{ noon.food_name }}</o> 重量:{{ noon.weight }}g;
                    </span></div>
                </div>
              </div>

              <div class="plates">
                <div class="time-type time-right-color">晚餐</div>
                <div class="der">
                  <div style="margin-left:6%;padding-top: 6%;">
                    <span class="plates-top-img" v-for="dinner in item.晚餐" :key="dinner"><img
                        :src="'http://' + baseUrl + '/' + dinner.meal_image" alt=""
                        style="width: 100%;height: 100%"></span>
                    <span class="plates-top-img" v-for="late in item.晚点" :key="late"><img
                        :src="'http://' + baseUrl + '/' + late.meal_image" alt="" style="width: 100%;height: 100%"></span>
                  </div>
                </div>

                <div class="platesFoods">
                  <div>大小：{{ item.multiple }}倍</div>
                  <div>晚餐18:00: <span v-for="dinner in item.晚餐" :key="dinner">
                      <o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{ dinner.weight }}g;
                    </span></div>
                  <div>晚点21:00: <span v-for="late in item.晚点" :key="late">
                      <o class="foodsNames">{{ late.food_name }}</o> 重量:{{ late.weight }}g;
                    </span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
    <!-- 食物选择建议 -->

    <div
      style="
        width: 100%;
        height: 40px;
        background-color: #ff5c82;
        margin-top: 20px;
        display: flex;
      "
    >
      <div>
        <img src="../../assets/img/24.png" style="height: 40px" alt="" />
      </div>
      <div
        style="
          font-size: 20px;
          margin-left: 10px;
          line-height: 40px;
          color: #fff;
        "
      >
        食物选择建议
      </div>
    </div>

    <div
      style="
        padding: 10px 10px;
        border: 2px solid #ff5c82;
        width: 96%;
        margin-left: 10px;
        margin-top: 20px;
      "
    >
      <div v-for="(item, index) in pagoda" :key="index">
        {{
          proposal.filter((ite, index) => {
            return ite.food_product_id == item.food_product_id;
          })[0] == undefined
            ? ""
            : item.title
        }}
        <div>
          <div v-if="item.product_energy < item.systam_down">
            {{
              proposal.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id;
              })[0] == undefined
                ? ""
                : proposal.filter((ite, index) => {
                    return ite.food_product_id == item.food_product_id;
                  })[0].content.split('<p>')[1].split('</p>')[0]
            }}
          </div>
          <div v-if="item.product_energy > item.systam_up">
            {{
              proposal1.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id;
              })[0] == undefined
                ? ""
                : proposal1.filter((ite, index) => {
                    return ite.food_product_id == item.food_product_id;
                  })[0].content.split('<p>')[1].split('</p>')[0]
            }}
          </div>
          <div
            v-if="
              item.product_energy >= item.systam_down &&
              item.product_energy <= item.systam_up
            "
          >
            {{
              proposal2.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id;
              })[0] == undefined
                ? ""
                : proposal2.filter((ite, index) => {
                    return ite.food_product_id == item.food_product_id;
                  })[0].content.split('<p>')[1].split('</p>')[0]
            }}
          </div>
        </div>
      </div>
    </div>

    <div></div>
  </div>
</template>
  
  
<script setup>
import { defineComponent, onMounted, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import * as api from "../../api/loginHttp";
import http, { baseUrl } from "../../utils/http";
import { useRoute, useRouter } from "vue-router";
import PrintJS from "print-js";
//   import ChildViewDietary from "../common/ChildViewdietarys.vue";

const router = useRouter();
const route = useRoute();
const labName = ref();
const groupId = ref();
const reportId = ref();
const id = ref();
const early_intervention = ref({});
const Monitoring_content = ref({});
const high_contents = ref({});
const pagoda = ref({});
const proposal = ref({});
const proposal1 = ref({});
const proposal2 = ref({});
const data = ref({});
const principle = ref({});
const diet = ref({});
const contents = ref({});
const birth = ref();
const username = ref();
const guardian = ref();
const birthStatus = ref();
const Titlename=ref()

const imgUrl = ref();
const form = ref({
  elText: "",
  elTextTwo: "",
  elTextThree: "",
});

const letEnergy = ref({ energy: 0, start: 0, end: 0 });
const protein = ref({ energy: 0, start: 0, end: 0 });
const fat = ref({ energy: 0, start: 0, end: 0 });
const carbohydrate = ref({ energy: 0, start: 0, end: 0 });
const calcium = ref({ energy: 0, start: 0, end: 0 });
const sodium = ref({ energy: 0, start: 0, end: 0 });
const magnesium = ref({ energy: 0, start: 0, end: 0 });
const iron = ref({ energy: 0, start: 0, end: 0 });
const zinc = ref({ energy: 0, start: 0, end: 0 });
const selenium = ref({ energy: 0, start: 0, end: 0 });
const vitamin_a = ref({ energy: 0, start: 0, end: 0 });
const vitamin_e = ref({ energy: 0, start: 0, end: 0 });
const vitamin_b1 = ref({ energy: 0, start: 0, end: 0 });
const vitamin_b2 = ref({ energy: 0, start: 0, end: 0 });
const vitamin_c = ref({ energy: 0, start: 0, end: 0 });
const diet_analysis = ref({});
const diet_analysis1 = ref({});
const diet_analysis2 = ref({});
const hospital_name = ref();
const report_time = ref();

const onHome = async () => {
  await router.push({ path: "/Home" });
};
Titlename.value=localStorage.getItem('Title');
const kcalType = ref(2);

const fetchData = async () => {
  setTimeout(() => {
      print("print-all");
    }, 2000);
  if (route.params.groupId) {
    groupId.value = route.params.groupId;
    id.value = route.params.id;
    reportId.value = route.params.reportId;

    username.value = route.params.username;
    guardian.value = route.params.guardian;
    birthStatus.value = route.params.birth;
    if (groupId.value === 3) {
      labName.value = "婴幼儿营养测评";
    } else if (groupId.value === 5) {
      labName.value = "孕产妇营养测评";
    } else if (groupId.value === 6) {
      labName.value = "成年人营养测评";
    } else if (groupId.value === 7) {
      labName.value = "慢性病营养测评";
    } else {
      labName.value = "婴幼儿营养测评";
    }

    http
      .get(
        "api/archives/viewReportMember?id=" +
          reportId.value +
          "&username=" +
          username.value +
          "&guardian=" +
          guardian.value +
          "&birth=" +
          birthStatus.value
      )
      .then((res) => {
        if (res.data.code === 0) {
          ElMessage.error(res.data.msg);
        }
        report_time.value = res.data.data.times;
        contents.value = res.data.data.contents;
        birth.value = res.data.data.contents.birth;

        if (
          res.data.data.feed_advice != "" &&
          res.data.data.feed_advice != null
        ) {
          form.value.elText = res.data.data.feed_advice;
        } else {
          form.value.elText =
            "当膳食方案中有食谱或食材不符合您的膳食习惯时，请先与医生确认，若医生认为某些食材对儿童的膳食营养改善很重要，要求不能置换或最好不要置换；其他类可进行同类食材替换，例如：猪肉、牛肉、羊肉之间可互换，鸡肉、鸭肉、鱼类之间可互换，蔬菜间可互换，米面间可互换，但要注意不要更改食材用量。\n" +
            "给儿童烹调食物时，宜尽可能保持食物的原味，口味以清淡为宜，少放调料。\n" +
            "每天应当进行至少1小时的户外游戏或运动，每天看电视、玩平板电脑的累计时间不超过2小时，日常生活中还可适当增加一些有氧活动例如：自行车、慢跑、跳绳、仰卧起坐、游泳等。";
        }

        if (
          res.data.data.nutrition_advice != "" &&
          res.data.data.nutrition_advice != null
        ) {
          form.value.elTextTwo = res.data.data.nutrition_advice;
        } else {
          form.value.elTextTwo =
            "这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n" +
            "家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。";
          if (
            contents._rawValue.hair_value != "" ||
            contents._rawValue.oralCavity_value != "" ||
            contents._rawValue.neck_value != "" ||
            contents._rawValue.Neuropathy_value != "" ||
            contents._rawValue.symptoms_value != ""
          ) {
            form.value.elTextTwo =
              "这个阶段是饮食行为和生活方式形成的关键时期，7岁前的儿童生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n" +
              "家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。";
          } else if (contents._rawValue.eye_value != "") {
            form.value.elTextTwo =
              "平衡膳食，多摄入动物肝、肾、奶、蛋和深绿或红黄蔬菜、水果等富维生素A和β胡萝卜素食物。婴儿要及时添加含动物肝等辅食，没有母乳的婴儿需配方奶喂养。生后及时按预防量补充维生素A。幼儿膳食中要注意脂肪和含维生素A和β胡萝卜素食物搭配食用。患消化系统疾病及消耗性疾病的患儿需及时补充维生素A制剂。\n" +
              "长期摄入不足是导致维生素A缺乏的主要原因，儿童维生素A的主要来自1、肝脏、鱼油、奶制品、鸡蛋等动物性食物；2、绿叶蔬菜以及黄色或橙色的水果和蔬菜中富含各种胡罗卜素，可在体内转变为维生素A。对于人体来说，动物性食物中的VA要比植物性中的VA更容易吸收。";
          } else if (contents._rawValue.skin_value != "") {
            form.value.elTextTwo =
              "谷类、硬果、动物内脏、蛋类及酵母中维生素B1含量丰富，但需要注意谷类加工过度可损失维生素B1，以及生鱼和贝类含有破坏维生素B1的酶，所以在日常饮食中不长期食用精米、生鱼和贝类。还需要注意的是维生素B1易溶于水，在碱性条件下易受热破坏，所以过分淘米或烹调中加碱也可导致维生素B1大量损失。\n" +
              "富含维生素B2的食物主要是动物肝脏（如肝、肾、心）等、蛋黄和乳类。谷类的精细加工会导致所含的维生素B2流失，所以儿童日常饮食中还需要增加粗粮的比例以及保证每日鸡蛋和牛奶的摄入。";
          } else if (contents._rawValue.sign_value != "") {
            form.value.elTextTwo =
              "足量的食物，平衡膳食，规律就餐，不偏食不挑食，每天饮奶多喝水，避免含糖饮料，是保障儿童生长发育的关键。日常生活中选择健康有营养的零食，避免含糖饮料和高脂肪的油炸食物，导致儿童正餐不按量食用。\n" +
              "营养不良的儿童，要在保证能量摄入充足的基础上，增加鱼、禽、蛋、瘦肉、豆制品等富含优质蛋白质的食物的摄入，经常使用奶及奶制品，每天吃新鲜的蔬菜水果；保证一日三餐，纠正偏食和过度节食等不健康饮食行为，并保持适宜的身体活动。";
          } else if (contents._rawValue.sign_value != "") {
            form.value.elTextTwo =
              "奶和奶制品是儿童钙的主要来源，也是最佳来源。绿色蔬菜、大豆及其制品特殊含有较高的钙，可作为补充来源。 需要特别注意的是钙在体内主动吸收需要维生素D，维生素D缺乏或不足时，钙主动吸收下降间接造成改缺乏。此外，运动锻炼也是骨骼健康的重要决定因素，跑、跳等中等程度的运动有利于骨骼钙沉积，达到更高的估量峰值。";
          }
        }

        form.value.elTextThree = res.data.data.doctor_advice;
      });

    imgUrl.value = "http://" + baseUrl + "/";

    let params = {
      groupId: groupId.value,
      id: id.value,
      reportId: reportId.value,

      username: username.value,
      guardian: guardian.value,
      birth: birthStatus.value,
    };
    const data = await api.energy(params);

    if (data.data.code == 0) {
      ElMessage.error(data.data.msg);
      await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
    }

    if (!data.data.data.diet_analysis) {
      ElMessage.error(data.data.msg);
      await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
    }
    for (let i = 0; i < data.data.data.diet_analysis.length; i++) {
      switch (i) {
        case 0:
          data.data.data.diet_analysis[i]["pName"] = "周一";
          break;
        case 1:
          data.data.data.diet_analysis[i]["pName"] = "周二";
          break;
        case 2:
          data.data.data.diet_analysis[i]["pName"] = "周三";
          break;
        case 3:
          data.data.data.diet_analysis[i]["pName"] = "周四";
          break;
        case 4:
          data.data.data.diet_analysis[i]["pName"] = "周五";
          break;
        case 5:
          data.data.data.diet_analysis[i]["pName"] = "周六";
          break;
        case 6:
          data.data.data.diet_analysis[i]["pName"] = "周日";
          break;
      }
    }

    diet_analysis.value = data.data.data.diet_analysis.filter((item,index)=>index<=2);
  diet_analysis1.value = data.data.data.diet_analysis.filter((item,index)=>index>2&&index<6);
  diet_analysis2.value = data.data.data.diet_analysis.filter((item,index)=>index>5);

    for (let i = 0; i < data.data.data.diet.length; i++) {
      letEnergy._value.energy =
        letEnergy._value.energy + parseInt(data.data.data.diet[i]["energy"]);
      protein._value.energy =
        protein._value.energy + parseInt(data.data.data.diet[i]["protein"]);
      fat._value.energy =
        fat._value.energy + parseInt(data.data.data.diet[i]["fat"]);
      carbohydrate._value.energy =
        carbohydrate._value.energy +
        parseInt(data.data.data.diet[i]["carbohydrate"]);
      calcium._value.energy =
        calcium._value.energy + parseInt(data.data.data.diet[i]["calcium"]);
      sodium._value.energy =
        sodium._value.energy + parseInt(data.data.data.diet[i]["sodium"]);
      magnesium._value.energy =
        magnesium._value.energy + parseInt(data.data.data.diet[i]["magnesium"]);
      iron._value.energy =
        iron._value.energy + parseInt(data.data.data.diet[i]["iron"]);
      zinc._value.energy =
        zinc._value.energy + parseInt(data.data.data.diet[i]["zinc"]);
      selenium._value.energy =
        selenium._value.energy + parseInt(data.data.data.diet[i]["selenium"]);
      vitamin_a._value.energy =
        vitamin_a._value.energy + parseInt(data.data.data.diet[i]["vitamin_a"]);
      vitamin_e._value.energy =
        vitamin_e._value.energy + parseInt(data.data.data.diet[i]["vitamin_e"]);
      vitamin_b1._value.energy =
        vitamin_b1._value.energy +
        parseInt(data.data.data.diet[i]["vitamin_b1"]);
      vitamin_b2._value.energy =
        vitamin_b2._value.energy +
        parseInt(data.data.data.diet[i]["vitamin_b2"]);
      vitamin_c._value.energy =
        vitamin_c._value.energy + parseInt(data.data.data.diet[i]["vitamin_c"]);
    }

    letEnergy._value.start = data.data.data.packAge[0].start_package;
    letEnergy._value.end = data.data.data.packAge[0].end_package;
    letEnergy._value.keyword = "✔ 正常";
    letEnergy._value.color = "everyBlack";

    // if (letEnergy._value.energy < letEnergy._value.start) {
    //   principle.value=data.value.foodliving[2].content;
    //   letEnergy._value.keyword = "▼ 不足";
    //   letEnergy._value.color = "everyRed";
    //   kcalType.value = 3;
    // } else if (letEnergy._value.energy > letEnergy._value.end) {
    //   principle.value=data.value.foodliving[1].content;
    //   letEnergy._value.keyword = "▲ 超标";
    //   letEnergy._value.color = "everyOrange";
    //   kcalType.value = 1;
    // }else{
    //   principle.value=data.value.foodliving[0].content;
    // }

    protein._value.start = data.data.data.packAge[1].start_package;
    protein._value.end = data.data.data.packAge[1].end_package;
    protein._value.keyword = "✔ 正常";
    protein._value.color = "everyBlack";
    if (protein._value.energy < protein._value.start) {
      protein._value.keyword = "▼ 不足";
      protein._value.color = "everyRed";
    } else if (protein._value.energy > protein._value.end) {
      protein._value.keyword = "▲ 超标";
      protein._value.color = "everyOrange";
    }

    fat._value.start = data.data.data.packAge[2].start_package;
    fat._value.end = data.data.data.packAge[2].end_package;
    fat._value.keyword = "✔ 正常";
    fat._value.color = "everyBlack";
    if (fat._value.energy < fat._value.start) {
      fat._value.keyword = "▼ 不足";
      fat._value.color = "everyRed";
    } else if (fat._value.energy > fat._value.end) {
      fat._value.keyword = "▲ 超标";
      fat._value.color = "everyOrange";
    }

    carbohydrate._value.start = data.data.data.packAge[3].start_package;
    carbohydrate._value.end = data.data.data.packAge[3].end_package;
    carbohydrate._value.keyword = "✔ 正常";
    carbohydrate._value.color = "everyBlack";
    if (carbohydrate._value.energy < carbohydrate._value.start) {
      carbohydrate._value.keyword = "▼ 不足";
      carbohydrate._value.color = "everyRed";
    } else if (carbohydrate._value.energy > carbohydrate._value.end) {
      carbohydrate._value.keyword = "▲ 超标";
      carbohydrate._value.color = "everyOrange";
    }

    calcium._value.start = data.data.data.packAge[4].start_package;
    calcium._value.end = data.data.data.packAge[4].end_package;
    calcium._value.keyword = "✔ 正常";
    calcium._value.color = "everyBlack";
    if (calcium._value.energy < calcium._value.start) {
      calcium._value.keyword = "▼ 不足";
      calcium._value.color = "everyRed";
    } else if (calcium._value.energy > calcium._value.end) {
      calcium._value.keyword = "▲ 超标";
      calcium._value.color = "everyOrange";
    }

    sodium._value.start = data.data.data.packAge[5].start_package;
    sodium._value.end = data.data.data.packAge[5].end_package;
    sodium._value.keyword = "✔ 正常";
    sodium._value.color = "everyBlack";
    if (sodium._value.energy < sodium._value.start) {
      sodium._value.keyword = "▼ 不足";
      sodium._value.color = "everyRed";
    } else if (sodium._value.energy > sodium._value.end) {
      sodium._value.keyword = "▲ 超标";
      sodium._value.color = "everyOrange";
    }

    magnesium._value.start = data.data.data.packAge[6].start_package;
    magnesium._value.end = data.data.data.packAge[6].end_package;
    magnesium._value.keyword = "✔ 正常";
    magnesium._value.color = "everyBlack";
    if (magnesium._value.energy < magnesium._value.start) {
      magnesium._value.keyword = "▼ 不足";
      magnesium._value.color = "everyRed";
    } else if (magnesium._value.energy > magnesium._value.end) {
      magnesium._value.keyword = "▲ 超标";
      magnesium._value.color = "everyOrange";
    }

    iron._value.start = data.data.data.packAge[7].start_package;
    iron._value.end = data.data.data.packAge[7].end_package;
    iron._value.keyword = "✔ 正常";
    iron._value.color = "everyBlack";
    if (iron._value.energy < iron._value.start) {
      iron._value.keyword = "▼ 不足";
      iron._value.color = "everyRed";
    } else if (iron._value.energy > iron._value.end) {
      iron._value.keyword = "▲ 超标";
      iron._value.color = "everyOrange";
    }

    zinc._value.start = data.data.data.packAge[8].start_package;
    zinc._value.end = data.data.data.packAge[8].end_package;
    zinc._value.keyword = "✔ 正常";
    zinc._value.color = "everyBlack";
    if (zinc._value.energy < zinc._value.start) {
      zinc._value.keyword = "▼ 不足";
      zinc._value.color = "everyRed";
    } else if (zinc._value.energy > zinc._value.end) {
      zinc._value.keyword = "▲ 超标";
      zinc._value.color = "everyOrange";
    }

    selenium._value.start = data.data.data.packAge[9].start_package;
    selenium._value.end = data.data.data.packAge[9].end_package;
    selenium._value.keyword = "✔ 正常";
    selenium._value.color = "everyBlack";
    if (selenium._value.energy < selenium._value.start) {
      selenium._value.keyword = "▼ 不足";
      selenium._value.color = "everyRed";
    } else if (selenium._value.energy > selenium._value.end) {
      selenium._value.keyword = "▲ 超标";
      selenium._value.color = "everyOrange";
    }

    vitamin_a._value.start = data.data.data.packAge[10].start_package;
    vitamin_a._value.end = data.data.data.packAge[10].end_package;
    vitamin_a._value.keyword = "✔ 正常";
    vitamin_a._value.color = "everyBlack";
    if (vitamin_a._value.energy < vitamin_a._value.start) {
      vitamin_a._value.keyword = "▼ 不足";
      vitamin_a._value.color = "everyRed";
    } else if (vitamin_a._value.energy > vitamin_a._value.end) {
      vitamin_a._value.keyword = "▲ 超标";
      vitamin_a._value.color = "everyOrange";
    }

    vitamin_e._value.start = data.data.data.packAge[11].start_package;
    vitamin_e._value.end = data.data.data.packAge[11].end_package;
    vitamin_e._value.keyword = "✔ 正常";
    vitamin_e._value.color = "everyBlack";
    if (vitamin_e._value.energy < vitamin_e._value.start) {
      vitamin_e._value.keyword = "▼ 不足";
      vitamin_e._value.color = "everyRed";
    } else if (vitamin_e._value.energy > vitamin_e._value.end) {
      vitamin_e._value.keyword = "▲ 超标";
      vitamin_e._value.color = "everyOrange";
    }

    vitamin_b1._value.start = data.data.data.packAge[12].start_package;
    vitamin_b1._value.end = data.data.data.packAge[12].end_package;
    vitamin_b1._value.keyword = "✔ 正常";
    vitamin_b1._value.color = "everyBlack";
    if (vitamin_b1._value.energy < vitamin_b1._value.start) {
      vitamin_b1._value.keyword = "▼ 不足";
      vitamin_b1._value.color = "everyRed";
    } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
      vitamin_b1._value.keyword = "▲ 超标";
      vitamin_b1._value.color = "everyOrange";
    }

    vitamin_b2._value.start = data.data.data.packAge[13].start_package;
    vitamin_b2._value.end = data.data.data.packAge[13].end_package;
    vitamin_b2._value.keyword = "✔ 正常";
    vitamin_b2._value.color = "everyBlack";
    if (vitamin_b2._value.energy < vitamin_b2._value.start) {
      vitamin_b2._value.keyword = "▼ 不足";
      vitamin_b2._value.color = "everyRed";
    } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
      vitamin_b2._value.keyword = "▲ 超标";
      vitamin_b2._value.color = "everyOrange";
    }

    vitamin_c._value.start = data.data.data.packAge[14].start_package;
    vitamin_c._value.end = data.data.data.packAge[14].end_package;
    vitamin_c._value.keyword = "✔ 正常";
    vitamin_c._value.color = "everyBlack";
    if (vitamin_c._value.energy < vitamin_c._value.start) {
      vitamin_c._value.keyword = "▼ 不足";
      vitamin_c._value.color = "everyRed";
    } else if (vitamin_c._value.energy > vitamin_c._value.end) {
      vitamin_c;
      vitamin_c._value.keyword = "▲ 超标";
      vitamin_c._value.color = "everyOrange";
    }

    
  } else {
    ElMessage.error("栏目编号不得为空");
    await router.push({ path: "/Home" });
  }
};
const pageList = async () => {
  await router.push({ path: "/pageList/" + groupId.value });
};
onMounted(() => {
  fetchData();
});

onMounted(() => {
  // 需要获取到element,所以是onMounted的Hook
  http
    .get(
      "api/archives/viewreport?id=" +
        reportId.value +
        "&username=" +
        username.value +
        "&guardian=" +
        guardian.value +
        "&birth=" +
        birthStatus.value
    )
    .then((res) => {
      // console.log(res.data.data,'777')
      proposal.value = res.data.data.foodselection.filter((item, index) => {
        return item.up_type == 2;
      });
      proposal1.value = res.data.data.foodselection.filter((item, index) => {
        return item.up_type == 1;
      });
      proposal2.value = res.data.data.foodselection.filter((item, index) => {
        return item.up_type == 3;
      });

      early_intervention.value =
        res.data.data.high_contents.intervention_one +
        res.data.data.high_contents.intervention_two +
        res.data.data.high_contents.intervention_three;
      Monitoring_content.value =
        res.data.data.high_contents.family_1 +
        res.data.data.high_contents.family_2 +
        res.data.data.high_contents.family_3 +
        res.data.data.high_contents.family_4 +
        res.data.data.high_contents.family_5 +
        res.data.data.high_contents.family_6 +
        res.data.data.high_contents.family_7 +
        res.data.data.high_contents.family_8 +
        res.data.data.high_contents.family_9 +
        res.data.data.high_contents.family_10 +
        res.data.data.high_contents.family_11 +
        res.data.data.high_contents.family_12 +
        res.data.data.high_contents.family_13;
      high_contents.value = res.data.data.high_contents;
      hospital_name.value = res.data.data.hospital_name;
      diet.value = res.data.data.diet;
      pagoda.value = res.data.data.pagoda;
      data.value = res.data.data;
      if (letEnergy._value.energy < letEnergy._value.start) {
        principle.value = data.value.foodliving[2].content;
        letEnergy._value.keyword = "▼ 不足";
        letEnergy._value.color = "everyRed";
        kcalType.value = 3;
      } else if (letEnergy._value.energy > letEnergy._value.end) {
        principle.value = data.value.foodliving[1].content;
        letEnergy._value.keyword = "▲ 超标";
        letEnergy._value.color = "everyOrange";
        kcalType.value = 1;
      } else {
        principle.value = data.value.foodliving[0].content;
      }
      // principle.value = res.data.data.principle;

      let color = ["#3EA4AA"];
      let color1 = ["#D0443B", "#3EA4AA"];
      let color2 = ["#D0443B", "#3EA4AA"];
      let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
      var arr = [];
      var arr2 = [];
      var parr = res.data.data.contents.primaryHeight;
      for (let i = 0; i < parr.length; i++) {
        arr.push(parr[i].content);
        arr2.push(parr[i].month);
      }
      var arr1 = [];
      var arr3 = [];
      var parr1 = res.data.data.contents.primaryWeight;
      for (let i = 0; i < parr1.length; i++) {
        arr1.push(parr1[i].content);
        arr3.push(parr1[i].month);
      }

      var myChart = echarts.init(document.getElementById("myChart1"));
      myChart.value = myChart;
      myChart.setOption({
        backgroundColor: "#fff",
        color: color,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "次数",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "BMI值",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "dotted",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  "rgba(83,148,208,0.15)",
                  "rgba(103,194,58,0.15)",
                  "rgba(226,203,80,0.15)",
                  "rgba(226,115,80,0.15)",
                ],
              },
            },
          },
        ],
        series: [
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumBmi,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      var myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        backgroundColor: "#fff",
        color: color1,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: arr2,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "身高",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
          },
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[0],
              },
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr,
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumHeight,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });

      var myChart2 = echarts.init(document.getElementById("myChart3"));
      myChart2.value = myChart2;
      myChart2.setOption({
        backgroundColor: "#fff",
        color: color2,
        legend: {
          top: 20,
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          },
        },
        grid: {
          top: 100,
          containLabel: true,
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15],
            },
            data: arr3,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "体重",
            axisLabel: {
              textStyle: {
                color: "#606266",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED",
              },
            },
            axisTick: {
              show: false, // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid",
              },
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6", //坐标轴指示线
              },
              show: true, //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
            },
          },
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[0],
              },
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "white",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr1,
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[1],
              },
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumWeight,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    });
});
</script>
  
<style scoped>
.state1 {
  display: none;
}

.state2 {
  display: block;
}

.biao1 {
  width: 25%;
  border-bottom: 1px solid #ff5c82;
  border-right: 1px solid #ff5c82;
  background-color: #ff5c82;
  color: #fff;
}

.biao5 {
  width: 25%;
  border-right: 1px solid #ff5c82;
  background-color: #ff5c82;
  color: #fff;
}

.biao6 {
  width: 25%;
  border-right: 1px solid #ff5c82;
  color: #000;
}

.biao2 {
  width: 25%;
  border-bottom: 1px solid #ff5c82;
  border-right: 1px solid #ff5c82;
  color: #000;
}

.biao3 {
  width: 25%;
  border-bottom: 1px solid #ff5c82;
  background-color: #ff5c82;
  color: #fff;
}

.biao4 {
  width: 75%;
  border-bottom: 1px solid #ff5c82;
  color: #000;
}

.biao7 {
  width: 25%;
  color: #000;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}

#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
}

#basic {
  font-size: 14px;
  width: 1075px;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  margin: auto;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}

#basic #createTime {
  font-size: 16px;
  color: #999999;
  float: right;
}

.subTitle {
  font-size: 30px;
  text-align: center;
  height: 30px;
  color: #ff5c82;
}

.right-box-card {
  margin-left: 2%;
  margin-top: 1%;
  position: static;
  top: calc(260px);
  width: 60%;
  float: left;
  /*min-height: 650px;*/
}

.images-wrapper {
  width: 100%;
  position: relative;
  height: 173px;
  font-weight: bold;
}

.foodsNames {
  color: red;
}

.images-content {
  position: absolute;
  z-index: 1;
  line-height: 54px;
  top: calc(55% - 54px);
  overflow: hidden;
  margin-left: 55%;
  font-size: 18px;
}

.service_plate {
  background: url("../../assets/img/evaluaction_service_plate.png") center
    no-repeat;
}

.dietOn {
  /* height: 510px; */
  /* margin-bottom: 270px; */
}

.everyRed {
  color: red;
}

.everyOrange {
  color: orange;
}

.everyBlack {
  color: #333333;
}

.time-botton {
  background-color: #ff5c82;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 30px 0 0 40px;
  text-align: center;
}

.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85ce61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  box-shadow: 5px 5px 2px #888888;
  margin: 20px 0 20px 40%;
}

.der {
  width: 240px;
  height: 174px;
  background: url("../../assets/img/evaluaction_service_plate.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin:auto;
}

.platesFoods {
  margin-top: 5px;
  margin-left: 8px;
  color: #333333;
  font-size: 14px;
}

.platesFoods div {
  padding-bottom: 18px;
}

.platesFoods span {
  color: #666666;
}

.plates {
  width: 33%;
  float: left;
}

.plates .plates-top-img {
  float: left;
  margin-left: 1%;
  width: 30%;
}

.time-left-color {
  background: #85ce61;
}

.time-common-color {
  background: #e8b973;
}

.time-right-color {
  background: #6ea9e0;
}

.images-lab {
  position: absolute;
  z-index: 1;
  line-height: 54px;
  top: calc(85% - 54px);
  overflow: hidden;
  margin-left: 55%;
  font-size: 50px;
}

#params {
  margin-top: 3%;
  font-size: 22px;
  font-weight: bold;
}

.shu {
  width: 5px;
  height: 30px;
  background: #ff5c82;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
  margin-left: 3%;
}

#params span {
  font-size: 15px;
  color: #666;
  margin-left: 2%;
}

li {
  list-style-type: none;
}

#params ul {
  margin-left: 3%;
}

.topColor {
  color: #e8b973;
}

.topBgColor {
  border: 1px solid #e8b973;
  background-color: #e8b973;
}

.normalColor {
  color: #ff5c82;
}

.normalBgColor {
  border: 1px solid #ff5c82;
  background-color: #ff5c82;
}

.bottomColor {
  color: #6ca9e3;
}

.bottomBgColor {
  border: 1px solid #6ca9e3;
  background-color: #6ca9e3;
}

.images-lab span {
  font-size: 18px;
}

.images-right {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 15%;
  height: 20%;
  line-height: 34px;
  top: calc(95% - 54px);
  overflow: hidden;
  margin-left: 75%;
  font-size: 18px;
  border-radius: 30px;
  color: #fff;
  text-align: center;
}

#enerty .bt {
  background: #f7f7f7;
  color: #fff;
}

#enerty .bt span {
  width: 25%;
  float: left;
  text-align: center;
  color: #999999;
  line-height: 30px;
}

#enerty ul li {
  width: 48%;
  display: inline-block;
  margin: 0;
}

#enerty .element span {
  width: 25%;
  float: left;
  text-align: center;
  line-height: 60px;
  font-size: 14px;
}
</style>
  